import { ButtonHTMLAttributes, AnchorHTMLAttributes, ReactNode } from 'react'
import classNames from 'classnames'

type ButtonSize = 'large' | 'small' | 'normal'
type ButtonType = 'primary' | 'default' | 'danger' | 'link'

// 组件参数
export interface CompButtonProps {
  /**设置 Button 的类名 */
  className?: string
  /**设置 Button 的禁用 */
  disabled?: boolean
  /**设置 Button 的尺寸 */
  size?: ButtonSize
  /**设置 Button 的类型 */
  btnType?: ButtonType
  children?: ReactNode
  /**设置 Button 的href属性（仅在type为link时有用） */
  href?: string
}

// 原生button attribute
type NativeButtonProps = ButtonHTMLAttributes<HTMLElement>
// 原生button attribute
type AnchorButtonProps = AnchorHTMLAttributes<HTMLElement>
// Partial<> 返回一个传入泛型，其属性都被置为可选
// a & b 交叉类型 返回一个类似继承a、b的子类c
export type ButtonProps = Partial<
  CompButtonProps & NativeButtonProps & AnchorButtonProps
>

// 获取组件配置的class
export const getButtonClassNames = (props: ButtonProps) => {
  const { disabled, className, size, btnType } = props
  return classNames('btn', className, {
    [`btn-${btnType}`]: !!btnType,
    [`btn-${size}`]: !!size,
    disabled: btnType === 'link' && disabled,
  })
}
